<template>
    <div class="Setting">
      <el-row class="body">
        <el-col :span="5" class="left">
          <el-menu
            :default-active="this.$router.path"
            class="el-menu-vertical-demo"
            :router="routerModule"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>常用功能</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(item,index) in group" :key="index" :index="item.index">{{item.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-setting"></i>
              <span slot="title">信息设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/settingMessages">
              <i class="el-icon-chat-dot-round"></i>
              <span slot="title">我的消息</span>
            </el-menu-item>
            <el-menu-item index="4" @click="exit">
              <i class="el-icon-chat-dot-round"></i>
              <span slot="title">退出登录</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :offset="1" :span="18" class="right">
          <!--<Messages></Messages>-->
          <router-view/>
        </el-col>
        <!--<Information :informationVisible="informationVisible"
                     @closeDialog="closeOrOpenInformation">
        </Information>
        <Punch :punchVisible="punchVisible"
               @closeDialog="closeOrOpenPunch">
        </Punch>
        <Recommend :recommendVisible="recommendVisible"
                   @closeDialog="closeOrOpenRecommend">
        </Recommend>-->
      </el-row>
    </div>
</template>

<script>
  import Information from "./components/Information";
  import Punch from "./components/Punch";
  import Recommend from "./components/Recommend";

  import {mapState} from 'vuex';
  import {mapMutations} from 'vuex';
  import Messages from "@/components/common/setting/components/Messages";
    export default {
        name: "Setting",
        data() {
            return {
              informationVisible:false,
              punchVisible:false,
              recommendVisible:false,
              routerModule:true,
              group:[
                {index:'/setting/settingInformation',name:'信息录入'},
                {index:'/setting/settingPunch',name:'打卡'},
                {index:'/setting/settingRecommend',name:'食谱推荐'},
              ]
            }
        },
        computed:{
          ...mapState(["token","accountName","avatar"])
        },
        methods: {
          ...mapMutations(['setToken','setAccountName']),
          handleOpen(key, keyPath) {

          },
          handleClose(key, keyPath) {

          },
          closeOrOpenInformation(){
            this.informationVisible=!this.informationVisible;
          },
          closeOrOpenPunch(){
            this.punchVisible=!this.punchVisible;
          },
          closeOrOpenRecommend(){
            this.recommendVisible=!this.recommendVisible;
          },
          exit(){
            this.setToken(null);
            sessionStorage.clear();
            this.$router.push({name:'HomePage'});
            this.$notify({
              title: '退出成功！',
              type: 'success'
            });
          },
        },
        components: {Messages, Recommend, Punch, Information},
        mounted() {
        }
    }
</script>

<style scoped lang="stylus">
.Setting
  width 100%
  margin 70px 0 auto
  background #EFEFEF
  .body
    margin 70px 150px auto
    box-sizing border-box
    padding 20px
    .left
      .el-menu
        width 200px
        height 434px
    .right
      box-sizing border-box
      padding 20px
      height 434px
      background #fff
</style>
